<template>
  <div>
    <div>
      <el-form :inline="true" size="medium">
        <el-form-item clearable label="会员等级：">
          <el-select v-model="queryObj.member_id" placeholder="全部" clearable>
            <el-option
              v-for="item in comboList"
              :key="item.member_id"
              :label="item.member_name"
              :value="item.member_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="用户昵称/手机号码"
            v-model="queryObj.query_value"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="注册时间区间:">
          <el-date-picker
            value-format="timestamp"
            v-model="queryObj.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getMainListReset"
            ><i class="iconfont icon-search"></i>查询</el-button
          >
          <el-button type="primary" size="medium" @click="goto('')"
          ><i class="iconfont icon-plus"></i>添加</el-button
          >
          <el-button type="primary" size="medium">导入</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mytable">
      <el-table
        :data="mainList"
        tooltip-effect="dark"
        stripe
        style="width: 100%"
      >
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <el-table-column label="id" width="100">
          <template slot-scope="scope">
            {{ scope.row.user_id }}
          </template>
        </el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <img class="headimg" :src="imgUrl + scope.row.user_head_img" alt="">
          </template>
        </el-table-column>
        <el-table-column label="手机号码">
          <template slot-scope="scope">
            {{ scope.row.mobilenum }}
          </template>
        </el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            {{ scope.row.sex == '1' ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column label="昵称">
          <template slot-scope="scope">
            {{ scope.row.user_nickname }}
          </template>
        </el-table-column>
        <el-table-column label="邮箱">
          <template slot-scope="scope">
            {{ scope.row.email }}
          </template>
        </el-table-column>
        <el-table-column label="地区">
          <template slot-scope="scope">
            {{ scope.row.user_area }}
          </template>
        </el-table-column>
        <el-table-column label="成长值">
          <template slot-scope="scope">
            {{ scope.row.TODO || '还没字段' }}
          </template>
        </el-table-column>
        <el-table-column label="积分">
          <template slot-scope="scope">
            {{ scope.row.TODO || '还没字段' }}
          </template>
        </el-table-column>
        <el-table-column label="注册时间" width="200">
          <template slot-scope="scope">
            {{scope.row.init_time | formatDate('yyyy-MM-dd hh:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column label="会员套餐/期限" width="200">
          <template slot-scope="scope">
            <p v-for="item in scope.row.memberConfig_list" :key="item.mu_id">
              <span>{{item.member_name}}</span>
              <span>（{{item.start_time | formatDate('yyyy-MM-dd')}}</span>至
              <span>{{item.end_time | formatDate('yyyy-MM-dd')}}）</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="绑定状态">
          <template slot-scope="scope">
            {{ scope.row.wx_openid ? '绑定' : '未绑定' }}
          </template>
        </el-table-column>
        <el-table-column label="推荐人手机">
          <template slot-scope="scope">
            {{ scope.row.tj_mobilenum }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="goto(scope.row)"
              ><i class="iconfont icon-edit"></i>编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_mainList"
        @size-change="_mainList"
        :page-size.sync="page.limit"
        :page-sizes="pageSizeArr"
        :current-page.sync="page.page"
        :total="page.total"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import memberInfoAPI from 'api/memberManagement/memberInfoAPI';
import { pageSizeArr } from "common/config/constConfig";
import config from "api/config";
import {mapMutations} from 'vuex'
import memberComboAPI from 'api/memberManagement/memberComboAPI';

export default {
  components: {},
  computed: {},
  data() {
    return {
      // statusList: line_audit_status,
      // lineStatus: line_status,
      // auditList: [],
      imgUrl: config.imgUrl,
      dialogTableVisible: false,
      pageSizeArr,
      queryObj: {},
      mainList: [],
      seriesList: [],
      comboList: [],
      page: {
        total: 0,
        page: 1,
        limit: 10
      }
    };
  },
  methods: {
    ...mapMutations('middleData', ['setMemberInfoObj']),

    goto(row) {
      let data = {path: '/home/memberInfoDetail'}
      // if(row) {
      //   data.query = {
      //     id: row.coupon_id,
      //     ...row
      //   }
      // }
      if(row) {
        data.path += '?id='+row.user_id
        this.setMemberInfoObj({...row})
      }
      this.$router.push(data)
    },

    // 获取会员套餐
    async getComboList() {
      memberComboAPI('getMemberConfigAllList').then(res => {
        // let arr = res.rData.concat([{member_id: '0',member_name: '所有人'}, {member_id: '9999',member_name: '新用户'}])
        this.comboList = res.rData
      })
    },
    del(row) {
      this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this._del(row);
      });
    },
    _del(row) {
      memberInfoAPI('del', {coupon_id: row.coupon_id}).then(res => {
        this._caozuoAfter(res.rMsg);
      });
    },
    // filter fun
    _caozuoAfter(msg) {
      this.dialogFormVisible = false;
      this.$message({
        message: msg,
        type: "success"
      });
      this._mainList();
    },
    getMainListReset() {
      this.page.page = 1;
      this._mainList();
    },
    // 获取
    _mainList() {
      let data = { ...this.queryObj };
      if(data.time && data.time.length > 0) {
        data.start_time = ~~(data.time[0] / 1000)
        data.end_time = ~~(data.time[1] / 1000)
      }
      data.pageInfo = { ...this.page };
      memberInfoAPI('get', data).then(res => {
        let pageInfo = res.pageInfo;
        this.page.total = pageInfo.Total;
        this.page.page = pageInfo.page;
        this.mainList = res.rData
      });
    },
  },
  created() {
    this._mainList();
    this.getComboList()
  }
};
</script>

<style lang="scss" scoped>
.headimg{
  height: 60px;
  width: 60px;
  border-radius: 50%;
}
</style>
